<template>
  <div class="checkbox-demo">
    <h3 class="title">基础调用</h3>
    <div>
      <p>
        <d-checkbox v-model="value">{{value}}</d-checkbox>
      </p>
      <p>
        <d-checkbox v-model="value1" :trueValue="1" :falseValue="2">{{ value1 }}, true: 1, false: 2</d-checkbox>
      </p>
      <p>
        <d-checkbox v-model="value2" trueValue="yes" falseValue="no">{{ value2 }}, true: yes, false: no</d-checkbox>
      </p>
    </div>
    <h3 class="title">基本调用</h3>
    <div>
      <p>值：{{value3}}</p>
      <p>
        <d-checkbox v-model="value3" :value="param[0]">自定义1</d-checkbox>
        <d-checkbox v-model="value3" :value="param[1]">自定义2</d-checkbox>
        <d-checkbox v-model="value3" :checked="true" :value="param[2]">自定义3</d-checkbox>
      </p>
      <p>值：{{value4}}</p>
      <p>
        <d-checkbox v-model="value4" :value="1">自定义1</d-checkbox>
        <d-checkbox v-model="value4" :value="2">自定义2</d-checkbox>
      </p>
    </div>
    <h3 class="title">数据模式调用</h3>
    <p>value：{{value5}}</p>
    <p>
      <d-checkbox :indeterminate="value5.length>0&&value5.length<3" :checked="value5.length == 3" @click.native="checkAll">全选 / Choose All</d-checkbox>
    </p>
    <p><d-checkbox v-model="value5" :datas="param1" ></d-checkbox></p>
    <h5 class="sub-title">基础 / Basic</h5>
    <p>value：{{value6}}</p>
    <p><d-checkbox v-model="value6" :limit="2" :datas="param2" ></d-checkbox></p>
    <h5 class="sub-title">全部禁用 / Disabled</h5>
    <p><d-checkbox v-model="value6" :datas="param2" disabled></d-checkbox></p>
    <h5 class="sub-title">自定义key, title字段名 / Custom key, title field name</h5>
    <p>value：{{value7}}</p>
    <p><d-checkbox v-model="value7" :datas="param3"  keyName="code" titleName="name"></d-checkbox></p>
  </div>
</template>

<script>
export default {
  name: 'checkboxDemo',
  data () {
    return {
      value: false,
      value1: 1,
      value2: 'yes',
      value3: { title: '选择1', key: 'a1', other: '其他值' },
      value4: null,
      param: [{ title: '选择1', key: 'a1', other: '其他值' }, { title: '选择2', key: 'a2' }, { title: '选择3', key: 'a3' }],

      value5: ['choose1', 'choose2', 'choose3'],
      value6: ['a1'],
      value7: ['0'],
      param1: ['choose1', 'choose2', 'choose3'],
      param2: [{ title: 'choose1', key: 'a1', other: 'other value' }, { title: 'choose2', key: 'a2' }, { title: 'choose3', key: 'a3' }],
      param3: [{ name: 'choose0', code: 0 }, { name: 'choose1', code: 'a1', other: 'other value' }, { name: 'choose2', code: 'a2' }, { name: 'choose3', code: 'a3', disabled: true }]
    }
  },
  methods: {
    checkAll () {
      if (this.value5.length === 3) {
        this.value5.splice(0, 3)
      } else {
        this.value5 = ['choose1', 'choose2', 'choose3']
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
// .checkbox-demo
</style>
